<!--课件章节树-->
<template>
	<div class="chapter-tree-component">
		<el-form ref="projectForm" label-suffix="：">
			<el-form-item>
				<cascader-project
					ref="projectCascader"
					:is-user-project="isUserProject"
					:menu-code="menuCode"
					:show-disabled-project="true"
					v-model="projectArr"
					@ready="onProjectReady"
					@change="onProjectChange"
				/>
			</el-form-item>
			<el-form-item>
				<el-cascader
					ref="cascader"
					clearable
					placeholder="请选择子级项目"
					:collapse-tags="true"
					:show-all-levels="false"
					:options="subProjectList"
					:props="{value: 'ptagId', label: 'ptagName'}"
					@change="onPtagIdChange"
					@clear="onPtagIdChange"
				/>
			</el-form-item>
			<el-form-item prop="subjectId">
				<el-select
					style="width: 100%"
					v-model="subjectId"
					placeholder="请选择"
					@change="onSubjectChange"
				>
					<el-option
						v-for="item in subjectList"
						:key="item.value"
						:label="item.subjectName"
						:value="item.subjectId"
					/>
				</el-select>
			</el-form-item>
		</el-form>
		<div class="course-ware-tab">
			<p
				:class="{'tab-item':true,'theme-border-bottom-color theme_font_color active': tabName==='course'}"
				@click="changeTab('course')"
			>
				系列课
			</p>
			<p
				:class="{'tab-item':true,'theme-border-bottom-color theme_font_color active': tabName==='chapter'}"
				@click="changeTab('chapter')"
			>
				章节目录
			</p>
		</div>
		<!-- 系列课 -->
		<div v-show="tabName==='course'" class="chapter-tree" v-loading="load.isShowChapterLoading">
			<el-tree
				accordion
				ref="courseTreeRef"
				node-key="seriesId"
				:default-expanded-keys="defaultExpandedCourse"
				:data="seriesCourses"
				:props="courseProps"
				highlight-current
				@node-click="onClickCourseTree"
			>
				<el-popover
					slot-scope="{ node }"
					class="tree-popover"
					popper-class="courseware-chapter-tree-popover"
					trigger="hover"
					placement="right"
					:content="node.label"
				>
					<span class="label-text" slot="reference">{{ node.label }}</span>
				</el-popover>
			</el-tree>
		</div>

		<!-- 章节目录 -->
		<div v-show="tabName==='chapter'" class="chapter-tree" v-loading="load.isShowChapterLoading">
			<el-tree
				accordion
				ref="chapterTreeRef"
				node-key="chapterId"
				:default-expanded-keys="defaultExpandedChapter"
				:data="chapterList"
				:props="chapterProps"
				highlight-current
				@node-click="onClickChapterTree"
			>
				<el-popover
					slot-scope="{ node }"
					class="tree-popover"
					popper-class="courseware-chapter-tree-popover"
					trigger="hover"
					placement="right"
					:content="node.label"
				>
					<span class="label-text" slot="reference">{{ node.label }}</span>
				</el-popover>
			</el-tree>
		</div>
	</div>
</template>
<script src="./index.mjs"/>
<style lang="less" scoped>
	.chapter-tree-component {
		/deep/ .el-form-item__content .el-cascader {
			width: 100%;
		}
		/deep/ .el-icon-caret-right:before {
			font-size: 14px;
		}
        .course-ware-tab{
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 10px;
            .tab-item{
                height: 40px;
                line-height: 40px;
                cursor: pointer;
                &.active{
                    border-bottom: solid;
                }
            }
        }
	}

    .tree-popover {
        flex-grow: 1;
        overflow: hidden;

        .label-text {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }
    }
</style>
<style >
    .el-popover.courseware-chapter-tree-popover {
        padding: 8px 12px;
    }

</style>
